<template>

	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>


		<uni-nav-bar left-icon="left" :fixed="true" :border="false" style="z-index: 99999;" @clickLeft="clickLeft">
			<up-tabs :list="tabs.list" lineWidth="35" :current="tabs.current" :itemStyle="tabs.itemStyle"
				:lineColor="tabs.lineColor" @change="changeTab"></up-tabs>
		</uni-nav-bar>


		<view class="form">
			<view class="list">
				<view class="amount">
					<up-row>
						<up-col span="12">
							<view @click="openKeyBoard" style="height: 100rpx;margin-top: 35rpx;">
								<up-text mode="price" size="50rpx" :color="tabs.lineColor" fonts
									:text="form.amount"></up-text>
							</view>
						</up-col>

					</up-row>
					<up-line :color="tabs.lineColor"></up-line>
				</view>

				<view style="line-height: 120rpx;font-size: 26rpx">
					<up-row>
						<up-col span="1.2">
							<up-icon size="50rpx" name="/static/imgs/icons/class.png"></up-icon>
						</up-col>
						<up-col span="1.8">
							<up-text color="#9b9b9b" text="分类"></up-text>
						</up-col>

						<up-col span="7">
							<view style="line-height: 50rpx;">
								<uni-data-picker v-slot:default="{ data, error, options }" title="请选择"
									:localdata="typeList" v-model="typeValue" @change="onTypeChange">
									<view class="input-border">
										<view v-if="error" class="error">
											<text>{{ error }}</text>
										</view>
										<view v-else-if="data.length" class="input-selected">
											<view v-for="(item, index) in data" :key="index" class="selected-item">
												<up-icon space="2rpx" :name="index>0?'arrow-right-double':''"
													:label="item.text"></up-icon>
											</view>
										</view>
										<view v-else><text>请选择</text></view>
									</view>
								</uni-data-picker>
							</view>
						</up-col>
					</up-row>
					<up-line></up-line>
				</view>

				<view class="item1">
					<up-row>
						<up-col span="1.2">
							<up-icon size="50rpx" name="/static/imgs/icons/time.png"></up-icon>
						</up-col>
						<up-col span="1.8">
							<up-text color="#9b9b9b" text="时间"></up-text>
						</up-col>

						<up-col span="7">
							<uni-datetime-picker return-type="timestamp" :border="false" :clear-icon="false"
								type="datetime" v-model="form.datetime" />

						</up-col>
					</up-row>
					<up-line></up-line>
				</view>

				<view class="item1">
					<up-row>
						<up-col span="1.2">
							<up-icon size="50rpx" name="/static/imgs/icons/remark.png"></up-icon>
						</up-col>
						<up-col span="1.8">
							<up-text color="#9b9b9b" text="备注"></up-text>
						</up-col>

						<up-col span="7">
							<up-input v-model="form.remark" :maxlength="500" border="none"></up-input>
						</up-col>
					</up-row>
					<up-line></up-line>
				</view>

				<view class="item1" style="margin-top: 35rpx;">


					<up-row>
						<up-col span="1.2">
							<up-icon size="50rpx" name="photo"></up-icon>
						</up-col>
						<up-col span="1.8">
							<up-text color="#9b9b9b" text="图片"></up-text>
						</up-col>

						<up-col span="7">
							<up-upload :fileList="form.imgs" @afterRead="afterRead" @delete="deletePic" name="1"
								multiple :maxCount="10" :previewFullImage="true"></up-upload>
						</up-col>
					</up-row>


				</view>

				<view class="buttons" v-if="buttons.show">
					<up-row>
						<up-col span="6">
							<up-button type="primary" @click="submit" style="width: 300rpx;" text="提交"></up-button>
						</up-col>
						<up-col span="6">
							<up-button v-if="form._id!=''" type="error" @click="deleteItem"
								style="width: 300rpx;margin-left: 40rpx;" text="删除"></up-button>
							<up-button v-else type="primary" @click="makeOne" style="width: 300rpx;margin-left: 40rpx;"
								text="再记一笔" color="#cccccc"></up-button>
						</up-col>
					</up-row>
				</view>


			</view>
		</view>

		<jia-PayKeyboard :overlayClose="true" ref="keyWord" v-model="form.amount" @input="inputPayKeyboard"
			@confirm="confirmPayKeyboard" @hide="hidePayKeyboard" :max="10000000"></jia-PayKeyboard>

	</view>
</template>

<script>
	let _self;
	import {
		getTypeList
	} from '../../static/js/config'
	import {
		formatShowClassName
	} from '../../static/js/funx';
	import {
		getUserTypeSelectList
	} from '../../static/js/user';
	import {
		addJournal,
		deleteJournal
	} from '../../static/api/book.js';
	import {
		MODEL_BOOKJOURNALE
	} from '../../static/api/model';
	import {
		getTempJournal,
		setTempJournal
	} from '../../static/js/journal';
	export default {
		mounted() {
			this.openKeyBoard();
		},
		data() {
			return {
				typeList: [],
				typeValue: '',
				buttons: {
					show: false
				},
				tabs: {
					list: getTypeList(),
					current: 0,
					currentItem: {},
					itemStyle: {
						width: "60px",
						height: "44px",
					},
					lineColor: ""
				},
				date: {
					show: false,
				},
				keyboard: {
					show: true,
				},
				form: MODEL_BOOKJOURNALE,
			}
		},
		onLoad() {
			_self = this
			_self.initForm()
			_self.tabsStyle()
		},
		onShow() {
			if (_self.form._id === "") {
				_self.form.datetime = Date.now()
			}
		},
		methods: {
			changeTab(item) {
				_self.tabs.current = item.index
				_self.openKeyBoard()
				_self.tabsStyle()
			},
			initForm() {
				const tp = getTempJournal()
				if (tp !== null) {
					let newObj = vk.pubfn.deepClone(tp);
					newObj.amount = newObj.amount.toString()
					_self.form = newObj
					setTempJournal(null)

					for (let i in _self.tabs.list) {
						const {
							id
						} = _self.tabs.list[i]
						if (id === _self.form.typid) {
							_self.tabs.current = i
						}

					}

				}
			},
			tabsStyle() {
				console.log("_self.tabs.current", _self.tabs.current)
				_self.tabs.lineColor = _self.tabs.list[_self.tabs.current].lineColor
				_self.tabs.currentItem = _self.tabs.list[_self.tabs.current]
				_self.form.typid = _self.tabs.currentItem.id
				_self.initSelect()
			},
			formatClassName(name) {
				return formatShowClassName(name)
			},
			// 初始化选择框
			initSelect() {
				_self.typeList = getUserTypeSelectList(_self.tabs.currentItem)
				if (_self.form._id === "") {
					const first = _self.typeList[0]
					_self.form.class_id = first.value
					_self.form.class_title = first.text
					if (first.children.length > 0) {
						_self.form.class_sub_id = first.children[0].value.split('-')[1]
						_self.form.class_sub_title = first.children[0].text
						_self.typeValue = first.children[0].value
					}

				} else {
					if (_self.form.class_sub_id == "") {
						_self.typeValue = _self.form.class_id
					} else {
						_self.typeValue = _self.form.class_id + "-" + _self.form.class_sub_id
					}
				}

			},
			closeKeyBoard() {
				this.$refs.keyWord.close();
				this.buttons.show = true
			},
			openKeyBoard() {
				this.$refs.keyWord.open();
				this.buttons.show = false
			},
			classClick() {
				_self.tps.show = true
			},
			clickLeft() {
				vk.navigateToHome();
			},
			empty() {
				_self.form.amount = '0'
				_self.form.remark = ''
				_self.form.imgs = []
			},
			// 选择改变事件
			onTypeChange(e) {
				const {
					value
				} = e.detail

				_self.form.class_id = value[0].value
				_self.form.class_title = value[0].text
				if (value.length >= 2) {
					_self.form.class_sub_id = value[1].value.split('-')[1]
					_self.form.class_sub_title = value[1].text
				}
			},
			inputPayKeyboard(e) {
				console.log(e)
			},
			confirmPayKeyboard(e) {
				_self.closeKeyBoard()
			},
			hidePayKeyboard() {},
			submit() {
				addJournal(_self.form).then(res => {
					if (res) {
						_self.empty()
					}
				})
			},
			makeOne() {
				_self.empty()
				_self.openKeyBoard()
			},
			deleteItem() {
				deleteJournal(_self.form._id)
			},
			uploadFilePromise(filepath) {
				return new Promise((resolve, reject) => {
					vk.uploadFile({
						title: "上传中...",
						filePath: filepath,
						success: (res) => {
							// 上传成功
							setTimeout(() => {
								resolve(res.url)
							}, 1000)

						},
						fail: (err) => {
							// 上传失败

						}
					});
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.imgs.length
				lists.map((item) => {
					this.form.imgs.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.imgs[fileListLen]
					this.form.imgs.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
		},

	}
</script>

<style>
	@import "@/static/css/add.css";
</style>